<template>
  <ul class="footer">
    <li @click="toIndex">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li>
      <i class="fa fa-compass"></i>
      <p>发现</p>
    </li>
    <li @click="toOrderList">
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li @click="toMyPage">
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>

    <!-- 登录/注册弹窗 -->
    <div v-if="showLoginModal" class="modal">
      <div class="modal-content">
        <h3>请登录或注册</h3>
        <button @click="goToLogin">登录</button>
        <button @click="goToRegister">注册</button>
        <button @click="closeModal">取消</button>
      </div>
    </div>
  </ul>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AppFooter',
  data() {
    return {
      showLoginModal: false, // 控制登录/注册弹窗的显示
      isLoggedIn: false // 用户是否登录
    };
  },
  mounted() {
    // 从 localStorage 获取登录状态
    this.isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  },
  methods: {
    toIndex() {
      this.$router.push({ path: '/index' });
    },
    toOrderList() {
      // 重新检查登录状态
      this.isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
      if (this.isLoggedIn) {
        this.$router.push({ path: '/orderList' });
      } else {
        this.showLoginModal = true; // 未登录时显示弹窗
      }
    },
    toMyPage() {
      this.isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
      if (this.isLoggedIn) {
        this.$router.push({ path: '/myPage' });
      } else {
        this.showLoginModal = true; // 未登录时显示弹窗
      }
    },
    goToLogin() {
      this.$router.push({ path: '/login' });
      this.showLoginModal = false; // 关闭弹窗
    },
    goToRegister() {
      this.$router.push({ path: '/register' });
      this.showLoginModal = false; // 关闭弹窗
    },
    closeModal() {
      this.showLoginModal = false; // 关闭弹窗
    }
  }
});
</script>

<style>
.footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}

.footer li p {
  font-size: 2.8vw;
}

.footer li i {
  font-size: 5vw;
}

/* 登录/注册弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.modal-content button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #0097ff;
  color: white;
  border: none;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #0077cc;
}
</style>
